<template>
	<!-- <view class="content" :style="{height:windowheight + 'px'}"> -->
	<!-- <view class="content" @dblclick="handleDoubleClick" @click.stop="sendLove"> -->
	<view class="content" @dblclick="handleDoubleClick">
		<view class="video-container">
			<video v-if="videoshow" class="myvideo" :src="videourl" autoplay :controls="false"  :show-center-play-btn="false" @error="error" id="myvideo"></video>
<!-- 			<video v-if="videoshow" class="myvideo" :src="url" autoplay :controls="false"  :show-center-play-btn="false" object-fit="cover" @error="error" id="myvideo"></video> -->
		</view>
		<!-- <image src="/static/image/room/ing.png" :fade-show="false" mode="aspectFill" class="fengmian-image" :style="{height:windowheight + 'px'}" -->
		<!-- <image src="/static/image/room/bg.png" :fade-show="false" mode="aspectFill" class="fengmian-image" -->
		<image src="/static/image/room/ing.png" :fade-show="false" mode="aspectFill" class="fengmian-image"
		  v-if="!videoshow"></image>
		  <!-- 播放按钮 -->
		<image v-if="!videoshow" src="/static/image/room/play3.png" mode="aspectFit" class="playicon"
		  	:style="{top:(windowheight/2)-30 + 'px'}" @tap="playvideo"></image>
		<!-- 顶部信息 -->
		<view class="top">
			<view class="left">
				<view class="zhubodata">
					<view class="himg" @click="showuser">
						<image src="/static/image/tx.jpg" mode=""></image>
					</view>
					<view class="userdata">
						<view class="nickname">这里是昵称</view>
						<view class="id">ID:666888</view>
					</view>
					<view class="guanzhu">
						关注
					</view>
				</view>
				<view class="other">
					<view class="hudou">
						虎豆 99 <image src="/static/image/room/back2.png" mode=""></image>
					</view>
					<view class="shouhu">
						守护 虚位以待 <image src="/static/image/room/back2.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 粉丝-前3 -->
			<view class="right">
				<view class="fsimg" @click="showuser">
					<image src="/static/image/tx.jpg" mode=""></image>
				</view>
				<view class="fsimg" @click="showuser">
					<image src="/static/image/tx.jpg" mode=""></image>
				</view>
				<view class="fsimg" @click="showuser">
					<image src="/static/image/tx.jpg" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 聊天信息 -->
		<view class="msg-view">
			<mh-msgList ref="msgList" :msgList="msgList"></mh-msgList>
		</view>
		<!-- 底部信息 -->
		<view class="bottombtn">
			<!-- 聊天 -->
			<view class="left">
				<view class="chat" @click="openInput">
					<image src="/static/image/room/xiaoxi.png" mode="" class="openInput"></image>
				</view>
			</view>
			<!-- 礼物、私信、退出 -->
			<view class="right">
				<view class="liwu">
					<image src="/static/image/room/liwu.png" mode=""></image>
				</view>
				<view class="xinxi">
					<u-icon v-for="(item, index) in likesData" :class="['icon-default', `${item.animate}`]" :name="item.name" :color="item.color" :key="item.id" ></u-icon>
					<image src="/static/image/room/xinxi.png" mode=""></image>
				</view>
				<view class="close" @click="close">
					<image src="/static/image/room/close.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 弹出-聊天 -->
		<uni-popup ref="chat" type="bottom"  @maskClick="onPopupChatClose" :isMaskClick="false" mask-background-color="rgba(0,0,0,0)">
		<view class="btnchat">
			<view class="left" @click="dmchange">
				<image src="/static/image/room/r01.png" mode="" v-if="!isdm"></image>
				<image src="/static/image/room/r0.png" mode="" v-if="isdm"></image>
			</view>
			<view class="middle">
				<input type="text" confirm-type="send" @confirm="sendMsg" class='form-input' v-model='inputModel'
					:focus="inputFocus" @input="onInput" @blur="blurInput" :placeholder="placeholder" placeholder-style="color:#cbcbcb">
				</input>
			</view>
			<view class="right">
				<image src="/static/image/room/send.png" mode="" v-if="inputModel == ''"></image>
				<image src="/static/image/room/send1.png" mode="" v-if="inputModel != ''" @click="sendMsg"></image>
			</view>
		</view>
		</uni-popup>
		<!-- 渲染爱心元素 -->
		<!-- <image class="love" v-for="(love, index) in loveList" :key="index" :src="love.imageUrl" :style="{ left: love.x + 'px', top: love.y + 'px', opacity: love.opacity, transform: `scale(${love.scale})` }"></image> -->
		<!-- 个人信息 -->
		<uni-popup  ref="userinfo" type="bottom" mask-background-color="rgba(0,0,0,0)">
		<view class="userinfo1">
			<view class="top1">
				<view class="one">
					<view class="left">
						<image src="/static/image/tx.jpg" mode=""></image>
					</view>
					<view class="isguanzhu">
						关注
					</view>
					<view class="right">
						<view class="rimg">
							<image src="/static/image/room/zhuye.png" mode=""></image>
						</view>
						<view class="rimg rimg2">
							<image src="/static/image/room/jubao.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="two">
					<view class="username">这里是昵称
						<image src="/static/image/room/nan.png" mode=""></image>
					</view>
					<view class="id">ID:666888
						<view class="locate">
							<image src="/static/image/room/locate.png" mode=""></image>
						</view>
						<span>北京</span>
					</view>
					<view class="achieve">
						<view class="ach ach1">
							<view class="achimg">
								<image src="/static/image/room/achieve1.png" mode=""></image>
							</view>
							<span>90</span>
						</view>
						<view class="ach ach2">
							<view class="achimg">
								<image src="/static/image/room/achieve2.png" mode=""></image>
							</view>
							<span>95</span>
						</view>
					</view>
				</view>
				<view class="three">
					<view class="three_li">
						<view class="three_item1">66</view>
						<view class="three_item2">关注</view>
					</view>
					<view class="three_li">
						<view class="three_item1">88</view>
						<view class="three_item2">粉丝</view>
					</view>
					<view class="three_li">
						<view class="three_item1">99</view>
						<view class="three_item2">送出钻石</view>
					</view>
					<view class="three_li">
						<view class="three_item1">66</view>
						<view class="three_item2">收入虎豆</view>
					</view>
				</view>
				<view class="four">
					<view class="four_li">帅哥</view>
					<view class="four_li">猛男</view>
					<view class="four_li">肌肉大帅哥</view>
					<view class="four_li">+添加印象</view>
				</view>
			</view>
			
			<view class="bottom1">
				<view class="xiaoxi">发消息</view>
				<view class="ata">@TA</view>
			</view>
		</view>
		</uni-popup>
	</view>
</template>

<script>
	import _ from 'lodash';
	export default {
		data() {
			return {
				likesData: [],
				total: 0,
				loveImages: [
					"/static/image/room/love1.png",
					"/static/image/room/love2.png",
					"/static/image/room/love3.png",
					"/static/image/room/love4.png",
					"/static/image/room/love5.png"
				],
				loveList: [], // 爱心元素列表
				placeholder:"和大家说些什么",
				isdm: false,
				inputModel: '',
				inputFocus: false,
				showInput: false,
				videoshow:false,
				windowheight:0,
				currentLoveIndex: 0,
				myvideo: null,
				msgList: [{
					userName: "公告",
					content: "直播间内的网址以及二维码都是诈骗广告，请勿随意点击。如若发生财产损失，平台概不负责。任何下载第三方软件的，都是诈骗软件。另外禁止买卖资源，以及私下转账收红包的行为，如果有要求转红包的，都是骗子。",
					cmd: "say",
					msg_type: "system"
				},{
					userName: "用户17",
					content: "789",
					cmd: "say",
					msg_type: "user"
				},{
					userName: "用户17",
					content: "456",
					cmd: "say",
					msg_type: "user"
				},{
					userName: "用户17",
					content: "123",
					cmd: "say",
					msg_type: "user"
				}],
				// url:'https://mp4.vjshi.com/2019-12-19/81543874c00aaef17aac412ceeb78069.mp4',//竖屏
				videourl:'https://mp4.vjshi.com/2023-09-03/f2bd67561ece493fb0e2b4673717730b.mp4',//横屏
			}
		},
		created() {
			this.myvideo = uni.createVideoContext('myvideo', this);
			this.windowheight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad() {
			// 获取主播信息
			this.getUser();
		},
		methods: {
			showuser(){
				this.$refs.userinfo.open();
			},
			// 隐藏聊天框
			onPopupChatClose(){
				// console.log('123')
				this.$refs.chat.close();
			},
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min)) + min;
			},
			getLikeParams(e) {
				const classLists = [
					'icon-animate-1',
					'icon-animate-2',
					'icon-animate-3',
					'icon-animate-4',
					'icon-animate-5',
					'icon-animate-6',
					'icon-animate-7',
					'icon-animate-8',
					'icon-animate-9'
				];
				const colorList = ['#A084CA', '#AAC4FF', '#FF9494', '#FA7070', '#5CB8E4', '#87A2FB', '#C7F2A4'];
			
				const className = classLists[this.randomNum(0, classLists.length)];
				const colorName = colorList[this.randomNum(0, colorList.length)];
			
				return {
					animate: className,
					color: colorName,
					name: 'heart-fill',
					id: `${new Date().getTime()}-likes`,
					x:e.x,
					y:e.y,
				};
			},
			sendLove: _.throttle(function(e) {
				
				new Promise(reslove => {
					// console.log(e)
					const params = this.getLikeParams(e.target);
					this.likesData.push(params);
					this.total += 1;
					this.$emit('getTotal', this.total);
					setTimeout(() => {
						reslove(params);
					}, 5000);
				}).then(res => {
					this.likesData.shift();
				});
			}, 10),
			handleDoubleClick() {
			  // 处理双击事件的逻辑
			  // console.log("双击事件触发了！");
			},
			// 弹幕
			dmchange(){
				this.isdm = !this.isdm;
			},
			// 弹出输入框
			openInput() {
				this.showInput = true;
				this.inputFocus = true;
				this.$refs.chat.open('bottom');
			},
			// 输入内容
			onInput(e) {
				this.inputModel = e.detail.value;
			},
			// 失去焦点-废弃
			blurInput(e) {
				// return false;
				// this.showInput = false;
				// this.inputFocus = false;
			},
			// 点击页面其他区域时触发
			onBodyClick(event) {
				const clickedElement = event.target.offsetParent;
				if(event.target.offsetParent == undefined){
					return;
				}
				console.log(event)
				// 判断点击的元素是否包含特定的类名（假设类名为"input-class"）
				if (!clickedElement.classList.contains('openInput')) {
					// this.showInput = false;
				}
			},
			// 发送消息
			sendMsg() {
				let message = {
					userName: '用户17',
					content: this.inputModel,
					cmd: "say",
					msg_type: "user"
				};
				// console.log(message)
				/** 实际应用应发送到服务端，通过监听服务端传回的消息加入的msgList **/
				if (this.msgList.length > 100) {
					this.msgList = this.msgList.splice(0, 1);
					this.msgList.push(message)
					this.$refs.msgList.setMsgPanelScroll();
				} else {
					this.msgList.push(message)
					this.$refs.msgList.setMsgPanelScroll();
				}
				this.inputModel = '';
			},
			close(){
				uni.switchTab({
					url: "/pages/index/index",
				})
				// 发送点击事件给父组件
				// this.$emit('roomClick');
			},
			getUser(){
			},
			playvideo(){
				this.videoshow = true;
				this.myvideo.play();
			},
			// 播放失败
			error(e) {
			  this.videoshow = false
			  console.log(e);
			  uni.showModal({
			    content: "资源加载错误，请重试",
			    confirmText: "重试",
			    success: (res) => {
			      if (res.confirm) {
			          uni.createVideoContext('myvideo').play()
			      }
			      if (res.cancel) {
			          uni.navigateBack()
			      }
			    }
			  })
			},
		},
		mounted() {
		  // 在页面加载完成后，监听整个页面的点击事件
		  // document.body.addEventListener('click', this.onBodyClick);
		},
		beforeDestroy() {
		  // 在页面销毁之前，移除页面的点击事件监听
		  // document.body.removeEventListener('click', this.onBodyClick);
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup{
		z-index: 999;
	}
	page{
		background-color: #000000;
		
		height: 100%;
	}
	.content{
		width: 750rpx;
		height: 100%;
		  // height: 100vh;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
	}
	.video-container{
		 display: flex;
		     justify-content: center;
		     align-items: center;
		     height: auto;
		     overflow: hidden; /* 隐藏视频超出容器的部分 */
	}
	#myvideo{
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	@media (orientation: portrait) {
	    #myvideo {
	        width: 100vw;
	        // height: auto;
	        height: 100vh;
	    }
	}
	
	@media (orientation: landscape) {
	    #myvideo {
	        width: auto;
	        height: 100vh;
	    }
	}
	.fengmian-image {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 750rpx;
	  background-color: #000000;
	  z-index:992;
	  height: 100vh;
	}
	.playicon {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		left: 310rpx;
		opacity: 0.6;
		z-index:993;
	}
	.top{
		position: absolute;
		width: 710rpx;
		top: 20rpx;
		z-index: 993;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		.left{
			.zhubodata{
				background-color: #0000005c;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 68rpx;
				border-radius: 40rpx;
				padding: 6rpx;
				.himg{
					width: 68rpx;
					height: 68rpx;
					border-radius: 60rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.userdata{
					margin: 0 6rpx;
					.nickname{
						color: #ffffff;
						font-size: 24rpx;
					}
					.id{
						color: #ffffff;
						font-size: 16rpx;
					}
				}
				.guanzhu{
					background-image: linear-gradient(
					  90deg,
					  rgba(198, 148, 254, 1) 0,
					  rgba(95, 195, 254, 1) 100%
					);
					padding: 18rpx 20rpx;
					border-radius: 60rpx;
					color: #ffffff;
					font-size: 20rpx;
				}
			}
			.other{
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.hudou,.shouhu{
					text-align: center;
					border-radius: 60rpx;
					background-color: #0000005c;
					color: #ffffff;
					font-size: 20rpx;
					padding: 10rpx 6rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					image{
						margin-left: 4rpx;
						width: 18rpx;
						height: 18rpx;
					}
				}
				.hudou{
					margin-right: 10rpx;
				}
				.shouhu{
					
				}
			}
		}
		
		.right{
			display: flex;
			.fsimg{
				width: 68rpx;
				height: 68rpx;
				border-radius: 60rpx;
				overflow: hidden;
				margin-right: 4rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.bottombtn{
		position: absolute;
		width: 710rpx;
		bottom: 0rpx;
		z-index: 993;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		.left{
			.chat{
				width: 68rpx;
				height: 68rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.right{
			display: flex;
			justify-content: space-between;
			.liwu,.xinxi,.close{
				width: 68rpx;
				height: 68rpx;
				margin-right: 16rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.close{
				margin-right: 0;
			}
		}
	}
	.msg-view {
		position: absolute;
		z-index: 992;
		width: 550rpx;
		height: 500rpx;
		left: 10rpx;
		bottom: 100rpx;
	}
	.btnchat{
		background-color: #f0f0f0;
		position: relative;
		z-index: 994;
		width: 730rpx;
		// height: 500rpx;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		padding: 12rpx;
		.left{
			width: 100rpx;
			height: 50rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.middle{
			padding:6rpx 10rpx;
			margin: 0 20rpx;
			border-radius: 60rpx;
			width: 500rpx;
			background-color: #ffffff;
			.form-input{
				height: 38rpx;
				line-height: 38rpx;
				text-indent: 10rpx;
				font-size: 30rpx;
				color: #000000;
			}
		}
		.right{
			width: 70rpx;
			height: 70rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.userinfo1{
		width: 750rpx;
		height: 710rpx;
		position: relative;
		bottom: 0px;
		background-color: #FFFFFF ;
		z-index: 993;
		border-radius: 16rpx 16rpx 0 0;
		// display: flex;
		.top1{
			padding: 20rpx;
			.one{
				width: 710rpx;
				// padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					width: 140rpx;
					height: 140rpx;
					border-radius: 120rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.isguanzhu{
					border-radius: 8rpx;
					padding: 20rpx 140rpx;
					
					background-image: linear-gradient(
					270deg,
					rgba(96, 195, 254, 1) 0,
					rgba(197, 148, 254, 1) 100%
				  );
					color: #ffffff;
					font-size: 30rpx;
					
				}
				.right{
					width: 180rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.rimg{
						width: 80rpx;
						height: 80rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.rimg2{
						margin-left: 20rpx;
					}
				}
			}
			.two{
				width: 710rpx;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #e8e8e8;
				.username{
					display: flex;
					align-items: center;
					color: #3D3D3D;
					font-size: 32rpx;
					image{
						margin-left: 10rpx;
						width: 40rpx;
						height: 32rpx;
					}
				}
				.id{
					color: #999999;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					margin-top: 6rpx;
					.locate{
						margin-left: 10rpx;
						width:30rpx ;
						height: 30rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.achieve{
					margin: 6rpx 0;
					display: flex;
					align-items: center;
					.ach{
						border-radius: 120rpx;
						padding: 0rpx 10rpx;
						display: flex;
						align-items: center;
						color: #FFFFFF;
						font-size: 20rpx;
						margin-right: 10rpx;
						.achimg{
							display: flex;
							align-items: center;
							width: 40rpx;
							height: 40rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
					.ach1{
						background-image: linear-gradient(
						  270deg,
						  rgba(206, 163, 252, 1) 0,
						  rgba(146, 130, 224, 1) 53.571427%,
						  rgba(91, 0, 170, 1) 100%
						);
					}
					.ach2{
						background-image: linear-gradient(
						  270deg,
						  rgba(244, 124, 216, 1) 0,
						  rgba(254, 174, 21, 1) 53.571427%,
						  rgba(170, 0, 135, 1) 100%
						);
					}
				}
			}
			.three{
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.three_li{
					text-align: center;
					    margin-right: 20rpx;
					.three_item1{
						color: #3D3D3D;
						font-size: 28rpx;
					}
					.three_item2{
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
			.four{
				width: 710rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				.four_li{
					margin-right: 20rpx;
					background-color: #F2F2F2;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #666666;
					padding: 6rpx 16rpx;
				}
			}
			
		}
		.bottom1{
			position: absolute;
			width: 710rpx;
			padding: 20rpx;
			bottom: 0;
			box-shadow: 0rpx -12rpx 72rpx -28rpx rgba(0, 0, 0, 0.1);
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.xiaoxi,.ata{
				background-color: #D6B3FF;
				color: #ffffff;
				font-size: 28rpx;
				padding: 20rpx 130rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>
<!-- 爱心 -->
<style lang="scss" scoped>
.xinxi {
	.icon-style {
		/deep/ .u-icon__icon {
			transition: all 0.1s;
			font-size: 28px !important;
		}
	}
	.icon-style:active {
		/deep/ .u-icon__icon {
			font-size: 24px !important;
		}
	}
	.icon-default {
		position: absolute;
		z-index: 994;
		/deep/ .u-icon__icon {
			font-size: 28px !important;
		}
	}
	.icon-animate-1 {
		animation: animate-1-left 2.4s ease-in-out, animate-1-top 2.4s cubic-bezier(0.66, 0.1, 1, 0.41);
		animation-fill-mode: forwards;
	}
	@keyframes animate-1-top {
		0% {
			top: 40rpx;
			opacity: 1;
		}

		100% {
			top: -400rpx;
			opacity: 0;
		}
	}

	@keyframes animate-1-left {
		0% {
			margin-left: 0;
		}

		100% {
			margin-left: -200rpx;
		}
	}
	.icon-animate-2 {
		animation: animate-2 2.4s ease-in-out;
		animation-fill-mode: forwards;
	}
	@keyframes animate-2 {
		0% {
			top: 40rpx;
			opacity: 1;
		}

		100% {
			top: -360rpx;
			opacity: 0;
		}
	}
	.icon-animate-3 {
		animation: animate-3-right 2.4s ease-in-out, animate-3-top 2.4s cubic-bezier(0.66, 0.1, 1, 0.41);
		animation-fill-mode: forwards;
	}
	@keyframes animate-3-top {
		0% {
			top: 40rpx;
			opacity: 1;
		}

		100% {
			top: -320rpx;
			opacity: 0;
		}
	}

	@keyframes animate-3-right {
		0% {
			margin-left: 0;
		}

		100% {
			margin-left: 60rpx;
		}
	}
	.icon-animate-4 {
		animation: animate-4 2.4s ease-in-out;
		animation-fill-mode: forwards;
	}
	@keyframes animate-4 {
		0% {
			top: 40rpx;
			margin-left: 0;
			opacity: 1;
		}

		100% {
			top: -320rpx;
			margin-left: -136rpx;
			opacity: 0;
		}
	}
	.icon-animate-5 {
		animation: animate-5 2.4s ease-in-out;
		animation-fill-mode: forwards;
	}
	@keyframes animate-5 {
		0% {
			top: 40rpx;
			margin-left: 0;
			opacity: 1;
		}

		100% {
			top: -400rpx;
			margin-left: 104rpx;
			opacity: 0;
		}
	}
	.icon-animate-6 {
		animation: animate-6 2.4s linear;
		animation-fill-mode: forwards;
	}
	@keyframes animate-6 {
		0% {
			top: 40rpx;
			margin-left: 0;
			opacity: 1;
		}

		100% {
			top: -400rpx;
			margin-left: -140rpx;
			opacity: 0;
		}
	}
	.icon-animate-7 {
		animation: animate-7 2.4s linear;
		animation-fill-mode: forwards;
	}
	@keyframes animate-7 {
		0% {
			top: 40rpx;
			margin-left: 0;
			opacity: 1;
		}

		100% {
			top: -280rpx;
			margin-left: 124rpx;
			opacity: 0;
		}
	}
	.icon-animate-8 {
		animation: animate-8 2.4s linear;
		animation-fill-mode: forwards;
	}
	@keyframes animate-8 {
		0% {
			top: 40rpx;
			margin-left: 0;
			opacity: 1;
		}

		100% {
			top: -360rpx;
			margin-left: 44rpx;
			opacity: 0;
		}
	}
	.icon-animate-9 {
		animation: animate-9 2.4s linear;
		animation-fill-mode: forwards;
	}
	@keyframes animate-9 {
		0% {
			top: 40rpx;
			margin-left: 0;
			opacity: 1;
		}

		100% {
			top: -440rpx;
			margin-left: -44rpx;
			opacity: 0;
		}
	}
}
</style>